<template>
	<view :data-theme="theme">
		<!-- <useNavBar :title="$t(`page.users.userInfo.navTitle`)">
			<view
				slot="right"
				style="color: #fff"
				class="iconfont icon-more"
				@click="open"
			></view>
		</useNavBar> -->
		<form @submit="formSubmit" report-submit="true">
			<view class="personal-data">
				<view class="list">
					<view
						class="item acea-row row-between-wrapper"
						style="height: 144rpx"
					>
						<view>{{ $t(`page.users.userInfo.avatar`) }}</view>
						<view class="pictrue" @click.stop="uploadpic">
							{{ newAvatar }}
							<image :src="newAvatar ? newAvatar : userInfo.avatar"></image>
						</view>
					</view>
					<view class="item acea-row row-between-wrapper">
						<view>{{ $t(`page.users.userInfo.name`) }}</view>
						<view class="input">
							<input
								type="text"
								name="nickname"
								:value="userInfo.nickname"
								maxlength="20"
							/>
						</view>
					</view>
					<view class="item acea-row row-between-wrapper">
						<view>ID</view>
						<view class="input acea-row row-between-wrapper">
							<input type="text" :value="uid" disabled="true" class="id" />
							<text class="iconfont icon-suozi"></text>
						</view>
					</view>
					<view class="item acea-row row-between-wrapper" v-if="userInfo.email">
						<view>{{ $t(`page.users.userInfo.email`) }}</view>
						<view class="input acea-row row-between-wrapper">
							<input
								type="text"
								disabled="true"
								name="email"
								:value="userInfo.email"
							/>
							<text class="iconfont icon-suozi"></text>
						</view>
					</view>
					<view class="item acea-row row-between-wrapper" v-if="userInfo.phone">
						<view>{{ $t(`page.users.userInfo.phone`) }}</view>
						<view class="input acea-row row-between-wrapper">
							<input
								type="number"
								disabled="true"
								name="phone"
								:value="userInfo.phone"
							/>&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;
							<text class="iconfont icon-suozi"></text>
						</view>
					</view>
					<view
						class="item acea-row row-between-wrapper"
						v-if="userInfo.userType == 'email' || userInfo.userType == 'phone'"
					>
						<view>{{ $t(`page.users.userInfo.password`) }}</view>
						<view class="input" @click="reset(userInfo.userType, 'reset')">
							{{ $t(`message.tips.edidM`)
							}}<text class="iconfont icon-xiangyou"></text>
						</view>
					</view>
					<view class="item acea-row row-between-wrapper">
						<view>{{ $t(`userDrawer.data[6].name`) }}</view>
						<view class="input" @click="show = true">
							{{ language }}
						</view>
					</view>
				</view>
				<button class="modifyBnt bg_color" formType="submit">
					{{ $t(`page.users.userInfo.save`) }}
				</button>
				<view
					class="logOut cart-color acea-row row-center-wrapper"
					@click="modal = true"
					>{{ $t(`page.users.userInfo.logOut`) }}</view
				>
			</view>
		</form>
		<tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
			<user-drawer @close="closeDrawer"></user-drawer>
		</tui-drawer>
		<tui-modal
			:show="modal"
			@click="handleClick"
			@cancel="hide"
			:content="$t(`message.login.logout`)"
		></tui-modal>
		<u-picker
			:show="show"
			:columns="columns"
			:confirmText="$t(`page.goodsDetail.confirm`)"
			:cancelText="$t(`page.goodsDetail.cancel`)"
			keyName="label"
			@confirm="languagelTab"
			@cancel="closePicker"
			confirm-color="#00785e"
		></u-picker>
	</view>
</template>

<script>
import tuiModal from "@/components/tui-modal/tui-modal";
import { userEdit, getLogout } from "@/api/user.js";
import { toLogin } from "@/libs/login.js";
import { mapState } from "pinia";
import { Debounce } from "@/utils/validate.js";
import { useAppStore } from "@/stores/app";
const appStore = useAppStore();
export default {
	data() {
		return {
			memberInfo: {},
			loginType: "h5", //app.globalData.loginType
			userIndex: 0,
			newAvatar: "",
			theme: "theme3",
			rightDrawer: false,
			modal: false,
			show: false,
			language: "Русский",
			columns: [
				[
					{
						label: "中文",
						// 其他属性值
						id: "zh-Hans",
					},
					{
						label: "English",
						id: "en",
					},
					{
						label: "Русский",
						id: "ru",
					},
					{
						label: "Қазақ",
						id: "kz",
					},
				],
			],
		};
	},
	components: {
		tuiModal,
	},
	computed: mapState(useAppStore, ["isLogin", "uid", "userInfo"]),
	onLoad() {
		this.$util.setTabBar();
		uni.setNavigationBarTitle({
			title: this.$t(`page.users.userInfo.navTitle`),
		});
		if (!this.isLogin) {
			toLogin();
		}
		this.columns[0].forEach((item) => {
			if (item.id === uni.getLocale()) {
				this.language = item.label;
			}
		});
	},
	methods: {
		open() {
			this.rightDrawer = true;
		},
		closeDrawer(e) {
			this.rightDrawer = false;
			if (!e) {
				this.rightDrawer = false;
			}
		},
		reset(type, scene) {
			uni.navigateTo({
				url:
					"/pages/users/user_pwd_edit/index?type=" + type + "&scene=" + scene,
			});
		},
		/**
		 * 退出登录
		 *
		 */
		handleClick(e) {
			let index = e.index,
				that = this;
			if (index === 1) {
				getLogout()
					.then((res) => {
						that.$Cache.set("login_back_url", "/pages/index/index");
						appStore.LOGOUT();
						uni.reLaunch({
							url: "/pages/index/index",
						});
					})
					.catch((err) => {
						console.log(err);
					});
			}
			this.hide();
		},
		hide() {
			this.modal = false;
		},
		/**
		 * 上传文件
		 *
		 */
		uploadpic: function () {
			let that = this;
			that.$util.uploadImageOne(
				{
					url: "upload/image",
					name: "multipart",
					model: "maintain",
					pid: 0,
				},
				function (res) {
					that.newAvatar = res.data.url;
				}
			);
		},

		/**
		 * 提交修改
		 */
		formSubmit: Debounce(function (e) {
			let that = this,
				value = e.detail.value;
			if (!value.nickname)
				return that.$util.Tips({
					title: this.$t(`page.users.userInfo.msg`),
				});
			value.avatar = that.newAvatar ? that.newAvatar : that.userInfo.avatar;
			userEdit(value)
				.then((res) => {
					appStore.changInfo({
						amount1: "avatar",
						amount2: that.newAvatar,
					});
					return that.$util.Tips(
						{
							title: this.$t(`message.login.saveSU`),
							icon: "success",
						},
						{
							tab: 3,
							url: 1,
						}
					);
				})
				.catch((msg) => {
					return that.$util.Tips(
						{
							title: msg || "保存失败，您并没有修改",
						},
						{
							tab: 3,
							url: 1,
						}
					);
				});
		}),
		returns() {
			uni.navigateBack();
		},
		languagelTab(n) {
			this.language = n.value[0].label;
			//  语言切换
			this.show = false;
			uni.setLocale(n.value[0].id);
			this.$i18n.locale = n.value[0].id;
		},
		closePicker() {
			this.show = false;
		},
	},
};
</script>

<style scoped lang="scss">
.personal-data .list {
	background-color: #fff;
}

.personal-data .list .item {
	border-bottom: 1rpx solid #f2f2f2;
	padding: 40rpx 30rpx;
	line-height: 30rpx;
	font-size: 32rpx;
	color: #282828;
	flex-wrap: nowrap;
}

.personal-data .list .item .phone {
	width: 160rpx;
	height: 56rpx;
	font-size: 24rpx;
	color: #fff;
	line-height: 56rpx;
	border-radius: 32rpx;
}

.personal-data .list .item .pictrue {
	width: 88rpx;
	height: 88rpx;
	position: relative;
}

.personal-data .list .item .pictrue image {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.personal-data .list .item .input {
	width: 415rpx;
	text-align: right;
	color: #868686;
	flex-wrap: nowrap;
}

.personal-data .list .item .input .id {
	width: 365rpx;
}

.personal-data .list .item .input .iconfont {
	font-size: 35rpx;
}

.personal-data .modifyBnt {
	font-size: 32rpx;
	color: #fff;
	width: 690rpx;
	height: 90rpx;
	border-radius: 50rpx;
	text-align: center;
	line-height: 90rpx;
	margin: 76rpx auto 0 auto;
}
.bg_color {
	@include main_bg_color(theme);
}
.personal-data .logOut {
	font-size: 32rpx;
	text-align: center;
	width: 690rpx;
	height: 90rpx;
	border-radius: 45rpx;
	margin: 30rpx auto 0 auto;
}
::v-deep .tui-red {
	@include main_bg_color(theme);
}
::v-deep .tui-red-outline {
	@include main_color(theme);
	@include coupons_border_color(theme);
}
</style>
<style>
.u-toolbar__wrapper__confirm {
	color: #00785e;
}
</style>
